<template>
  <span v-html="heightLight"/>
</template>

<script>
export default {
  name: 'HeightText',
  props: {
    search: {
      search: [String, Number],
      default: '',
      required: true,
    },
    text: {
      validator: function (value) {
        return (
            value === null ||
            typeof value === 'string' ||
            typeof value === 'number'
        )
      },
      default: '',
      required: true,
    },
  },
  computed: {
    heightLight() {
      if (this.search === '' || this.search === undefined || this.search === null) return this.text;
      return String(this.text).replace(new RegExp(this.search, 'gi'), match => `<mark style="color: red;font-weight: bold;">${match}</mark>`);
    },
  }
}
</script>

<style scoped/>